<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav> -->

    <Topbar :key="topbarKeyValue"> </Topbar>
    <Header> </Header>

    <router-view @updateKey="updateKeyFn" />
    <Footer></Footer>
    <Login v-show="isShowLoginModal" />
    <!-- 提示框 Toast -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
// @ is an alias to /src
import Topbar from "@/components/Topbar.vue";
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";

// import axios from "axios";
// import axios from "@/request/request";

import { mapMutations, mapState } from "vuex";
export default {
  name: "HomeView",
  data() {
    return { topbarKeyValue: 0 };
  },
  methods:{
    //子组件改变topbarKeyValue 让topbar发生重载
    updateKeyFn(){
      this.topbarKeyValue++
    }
  },
  watch: {
    //每次路由切换，都让topbar重载
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.topbarKeyValue++;
        }
      },
    },
  },
  components: {
    Topbar,
    Footer,
    Header,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToast: (state) => state.toastShow.isShowToast,
    }),
  },
  async created() {
    /*   写法一： 
   弊端：
    1.每次发起请求，都需要输入很长一段地址 一旦地址改变了，每个地方都要改变
    2.每次发请求都要携带token
    3.会有回调地狱问题
          例如请求A完成后再请求B
    ========封装axios
    1. src/request/request.js
    2.统一接口代码位置 src/request/api.js
    
  */
    // axios
    //   .get("http://kumanxuan1.f3322.net:8881/cms/products/recommend")
    //   .then((res) => {
    //     console.log("请求发送成功", res);
    //   })
    //   .catch((err) => {});
    /*   ==============================
  写法二：省去了写一大串请求地址  */
    // axios
    //   .get("/products/recommend")
    //   .then((res) => {
    //     console.log(res);
    //   })
    //   .catch((err) => {});
    /* 写法三：将接口代码统一存放 */
    // JingpinAPI()
    //   .then((res) => {
    //     console.log("精品数据响应3",res);
    //   })
    //   .catch((err) => {});

    // let res = await JingpinAPI();
    // console.log(res);
  },
};
</script>

<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
提示框样式 .slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
